<template>
	
	<view class="">
		<headerinfo></headerinfo>
		<view class="daozuo">
			<view class="actions" >
				<view class="action-item"  @click="tabbarCheck(1)">
					<u-icon name="home" size="40px"></u-icon>
					<text>首页</text>
				</view>
				<view class="action-item" @click="tabbarCheck(2)">
					<u-icon name="heart" size="40px"></u-icon>
					<text>纪念厅</text>
				</view>
				<view class="action-item" >
					<u-icon name="chat" size="40px" color="#de4849"></u-icon>
					<text style="color: #de4849;">留言</text>
				</view>
			</view>
		</view>
		<view class="width60">
			<u-navbar title="纪念馆留言板" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
				:titleStyle="titleStyle"></u-navbar>
				<view class="searchPage">
					
						
				<view class="tingInfo1">
					<view class="containerlist" style="height: 72vh;overflow-y: scroll;">
						<!-- 评论 -->
						<view class="evalution" v-if="comments && comments.length > 0">
							<view v-for="(item, index) in comments" :key="index" class="eva-item">
								<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
								<view class="defaultTx" v-else>
									<span>{{ item.username[0] }}</span>
								</view>
						
								<view class="eva-right">
									<text>{{ item.username }}</text>
									<text class="content">{{ item.content }}</text>
									<span class="date">
										{{ item.dataUpdateTime.substr(5, 11) }}
										<span @click="delcomments(item.docId, index)" v-if="username == item.username">删除</span>
										<span @click="callBack(item)">回复</span>
									</span>
									<span class="huifuBox" @click="showHuifuMore(item)"
										v-if="item.children && item.children.length > 0">
										<span>
											{{ item.children.length }} 回复
											<i class="iconfont">&#xe613;</i>
										</span>
									</span>
								</view>
							</view>
							
							<view class="" style="height: 200rpx;">
								
							</view>
						</view>
						<view class="noPinglun" v-else>快来发布第一条留言吧</view>
					</view>
					
					<view class="bottom lastenter" >
						<view class="backBox" v-if="backUser.username">
							回复：{{ backUser.username }}
							<span @click="clearBack" style="margin-left: 10rpx;">取消回复</span>
						</view>
						<view class="flix">
							<view class="input-box">
								<textarea class="input" v-model="commentArticleForm.content" placeholder="发表留言.."
									placeholder-style="color:#adb1b9;" :adjust-position="false"></textarea>
							</view>
							<text class="confirm-btn" @click="submit">提交</text>
						</view>
					</view>
				</view>
					<!-- <u-tabbar :value="tabbarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
						<u-tabbar-item text="主页" icon="home" @click="tabbarCheck(1)"></u-tabbar-item>
						<u-tabbar-item text="纪念厅" icon="heart" @click="tabbarCheck(2)"></u-tabbar-item>
						<u-tabbar-item text="留言" icon="chat" ></u-tabbar-item>
					</u-tabbar> -->
					
				
				</view>
		</view>
	
			
			
			<!--回复弹窗-->
			<tui-bottom-popup :show="huifuDia" @close="huifuDia = false">
				<view class="backTanBox" v-if="backData.children && backData.children.length > 0">
					<view class="title">
						<i class="iconfont" @click="huifuDia = false">&#xe607;</i>
						{{ backData.children.length }} 条回复
					</view>
					<view class="containerlist" style="border-bottom: 1px solid #efefef;">
						<!-- 评论 -->
						<view class="evalution">
							<view class="eva-item">
								<image class="touxiang" v-if="backData.avatar" :src="backData.avatar" mode="aspectFill">
								</image>
								<view class="defaultTx" v-else>
									<span>{{ backData.username[0] }}</span>
								</view>
			
								<view class="eva-right">
									<text>{{ backData.username }}</text>
									<text class="content">{{ backData.content }}</text>
									<text class="date">{{ backData.dataUpdateTime.substr(5, 11) }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="mainBox">
						<view class="containerlist">
							<!-- 评论 -->
							<view class="backAllName">全部回复</view>
							<view class="evalution">
								<view v-for="(item, index) in backData.children" :key="index" class="eva-item">
									<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
									<view class="defaultTx" v-else>
										<span>{{ item.username[0] }}</span>
									</view>
			
									<view class="eva-right">
										<text>{{ item.username }}</text>
										<text class="content">{{ item.content }}</text>
										<text class="date">{{ item.dataUpdateTime.substr(5, 11) }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</tui-bottom-popup>
	</view>
	
</template>

<script>
	const util = require('@/common/refresh.js');
	import tuiBottomPopup from '@/components/bottom-popup/bottom-popup';
	export default {
		components: {tuiBottomPopup},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				tabbarIndex: 2,
				id: '',
				list:[],
				info:{},
				backUser:{},
				commentArticleForm: {
					content: '',
					replyCommentId: '',
					articleId: '',
					lifeId: '',
					museumId:''
				},
				comments:[],
				backData:{},
				huifuDia:false,
				safeAreaInsets:{},
				 keyboardHeight: 0
			};
		},
		onLoad(e) {
			this.id = e.id
			
			
			
				
		},
		 onUnload() {
		    // 页面销毁时移除监听
		    uni.offKeyboardHeightChange();
		  },
		onShow() {
			this.getData()
			const { safeAreaInsets } = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			
			
			//  监听键盘高度变化
			uni.onKeyboardHeightChange((res)=>{
			    // 获取系统信息
				if (res.height) {
					let _sysInfo = uni.getSystemInfoSync()
					　　let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					　　let _diff = res.height - _heightDiff
					　　this.keyboardHeight = _diff > 0 ? _diff : 0
					
					
					//  let deviceBottom= this.safeAreaInsets.bottom;  
					//  this.keyboardHeight = res.height ? (res.height - deviceBottom - deviceBottom) : 0  
				}else{
					this.keyboardHeight = 0
				}
			})
		},
		methods: {
			showHuifuMore(data) {
				this.backData = data;
				this.huifuDia = true;
			},
			submit: util.throttle(function() {
				if (this.commentArticleForm.content == '') {
					return this.$Show.show('输入点信息吧。');
				}
				
				
				this.commentArticleForm.museumId = this.id
				this.$api.museumcommentMuseum(this.commentArticleForm).then(res => {
					this.setComment(res)
					
					
				});
			}),
			delcomments(commentId, index) {
					let data = {
						articleId: this.articleId,
						commentId,
						museumId:this.id
					};
								
					console.log(index);
					this.$api.halldeleteComment(data).then(res => {
						this.$Show.show('删除成功');
						this.comments.splice(index, 1);
					});
			
			},
			setComment(res) {
				this.$Show.show('留言成功');
				this.commentArticleForm.content = '';
				this.backUser = {};
				this.getData()
				
				uni.pageScrollTo({
				       scrollTop: 999999,
				       duration: 300 // 滚动动画时长，默认300ms
				     });
			},
			clearBack() {
				this.commentArticleForm.replyCommentId = '';
				this.backUser = {};
			},
			getData() {
				let data = {
					museumId: this.id
				}
				
				this.$api.museumgetMuseum(data).then(res => {
					if (res.museum.comments && res.museum.comments.length > 0) {
						res.museum.comments = this.$utils.treeDataTranslate2(res.museum.comments, 'docId', 'replyCommentId');
						this.comments = res.museum.comments
					}
					
					this.info = res
				})
				
			},
			//回复评论
			callBack(item) {
				console.log(item);
				this.backUser = item;
				this.commentArticleForm.replyCommentId = item.docId;
			},
			toAddliuyan(){
				uni.navigateTo({
					url:`/pagesobit/obit/addliuyan?id=${this.id}`
				})
			},
			tabbarCheck(index) {
				if(index == 1){
					uni.redirectTo({
						url: `/pagesobit/obit/citang?id=${this.id}`
					})
				}else{
					uni.redirectTo({
						url: `/pagesobit/obit/ting?id=${this.id}`
					})
				}
			},
			del(){
				uni.showModal({
				    title: '提示',
				    content: '是否确认删除？',
				    success:  (res)=> {
				        if (res.confirm) {
							
				        } 
				    }
				});
			}
		}
	};
</script>


<style lang="scss" scoped>
	
	.backAllName {
		padding: 0 30rpx;
		padding-top: 20rpx;
		font-size: 34rpx;
	}
	
	.backTanBox {
		height: 90vh;
		width: 100%;
		overflow-y: scroll;
	
		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #e7e7e7;
			position: relative;
			font-size: 32rpx;
	
			.iconfont {
				position: absolute;
				left: 30rpx;
			}
		}
	}
	
	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20upx 0;
	
		.defaultTx {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			border: 1px solid #e3d803;
			background-color: #e3d803;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
	}
	
	.eva-item {
		display: flex;
		padding: 20upx 30upx;
		position: relative;
	
		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}
	
		&:after {
			content: '';
			position: absolute;
			left: 30upx;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid #eee;
			transform: translateY(50%);
		}
	
		&:last-child:after {
			border: 0;
		}
	}
	
	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 26upx;
		color: #909399;
		position: relative;
	
		.content {
			font-size: 28upx;
			color: #333;
			padding-top: 20upx;
		}
	
		.date {
			margin-top: 20rpx;
	
			span {
				margin-left: 20rpx;
			}
		}
	}
	
	.detailDatacontent {
		margin-top: 20rpx;
	
		.images {
			margin-top: 20rpx;
	
			image {
				width: 100%;
			}
	
			.posterUrl {
				width: 100%;
			}
		}
	}
	

	
	.searchPage {
		width: 100%;
		// background-image: url('https://jn.huaien.com/static/img/memorial-body.png');
		background-size: 100% 100%;
		height: 100vh;
	}

	
	
	.bottom {
		flex-shrink: 0;
		    display: flex;
		    align-items: center;
		    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
		    position: fixed;
		    bottom: 0;
		    z-index: 1;
		    height: auto;
		    width: 60%;
		    background-color: #fff;
		    z-index: 10;
		    padding: 20rpx 20rpx;
		    flex-direction: column;
			
			.backBox{
				    font-size: 28rpx;
				    color: #9d9d9d;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    width: 100%;
			}
			
			.flix{
				    width: 100%;
				    display: flex;
				    align-items: center;
			}
	
		.input-box {
			    display: flex;
			    align-items: center;
			    flex: 1;
			    height: 250rpx;
			    background: #f2f3f3;
			    border-radius: 20rpx;
			    padding: 15rpx;
	
			.icon-huifu {
				font-size: 28upx;
				color: #909399;
			}
	
			.input {
				    padding: 0 20rpx;
				    font-size: 28rpx;
				    color: #303133;
				    height: 100%;
				    width: 494rpx;
			}
		}
	
		.confirm-btn {
			    font-size: 30rpx;
			    padding-left: 20rpx;
			    color: #de4849;
			    white-space: nowrap;
		}
	}
	
	.tingInfo1{
		background-color: #f8f8f8;
		.eva-item {
			width: 95%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			box-shadow: 0 0 3px #ccc;
			border: none;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	
	.noPinglun{
		position: fixed;
		top: 50%;
		left: 50%;
		color: #7d7d7d;
		transform: translate(-50%, -50%);
	}
	
	
	/* 点赞等操作 */
	.actions {
		display: flex;
		align-items: center;
		line-height: 1.3;
		padding-right: 44upx;
		padding-top: 16upx;
		position: fixed;
		left: 0;
		left: 15%;
		flex-direction: column;
		top: 30%;
	
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 60upx;
			color: #333;
			margin-bottom: 80rpx;
			cursor: pointer;
	
			span {
				font-size: 24rpx;
			}
	
			.iconfont {
				font-size: 33px;
			}
		}
	
		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 52upx;
	
			&.reverse {
				position: relative;
				top: 6upx;
				transform: scaleY(-1);
			}
	
			&.active {
				color: #ec706b;
			}
		}
	
		.icon-fenxiang2 {
			font-weight: bold;
			font-size: 88upx;
		}
	
		.icon-shoucang {
			font-size: 88upx;
		}
	}

</style>